<template>
  <div class="con_wrap">
    <div class="conCover" v-if="!$route.query._id"></div>
    <table-title width="100%" title-text="课程内容"></table-title>
    <div class="con_info">
      <div class="con_left">
        <el-button type="primary" @click="Add">添加目录</el-button>
        <el-table
          @current-change="dirTableChange"
          :highlight-current-row="true"
          ref="mydirTable"
          height="300"
          border
          :data="dirList"
        >
          <el-table-column label="目录" prop="CDName"></el-table-column>
          <el-table-column
            label="视频数量"
            prop="CourseNumber"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-link type="primary" @click="toEdit(scope.row)"
                  >编辑</el-link
                >
                <el-link type="danger" @click="delDir(scope.row._id)"
                  >删除</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="con_right">
        <el-button type="primary" @click="openVideo">添加视频</el-button>
        <el-table height="300">
          <el-table-column label="视频名称"></el-table-column>
          <el-table-column label="视频时长"></el-table-column>
          <el-table-column label="操作">
            <template>
              <div>
                <el-link type="danger">删除</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 添加目录的弹出层 -->
    <el-dialog :title="dirTitle" :visible.sync="dirFlag" width="40%">
      <el-form>
        <el-form-item label="目录名称">
          <el-input v-model="CDName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="success" @click="sureAdd">{{ dirBtn }}</el-button>
        <el-button type="danger">取消</el-button>
      </span>
    </el-dialog>
    <!-- 目录下视频添加 -->
    <el-dialog title="添加视频" width="40%" :visible.sync="vFlag">
      <el-table border :data="VideoList">
        <el-table-column label="视频名称" prop="Vname"></el-table-column>
        <el-table-column label="绑定课程" prop="Vstate"></el-table-column>
        <el-table-column label="视频时长" prop="Vtime"></el-table-column>
        <el-table-column label="发布日期">
          <template slot-scope="scope">
            <div>{{ new Date(scope.row.createAt).toLocaleString() }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="primary" @click="sureAddDirVid(scope.row._id)"
                >添加</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <div style="margin: 20px 0"></div>
    <wang-editor ref="wang"></wang-editor>
    <el-button type="success" @click="saveAll">全部保存</el-button>
  </div>
</template>
<script>
import { _getVideoList } from '../../api/video'

import wangEditor from './WanEditor'
import {
  _addDir,
  _delDir,
  _getCourse,
  _EditDir,
  _addDirVideo,
  _getDirVideo,
  _SaveAll
} from '../../api/course'
export default {
  components: { wangEditor },
  data () {
    return {
      vFlag: false, //添加视频的弹出层
      dirTitle: '添加目录',
      dirBtn: '确认添加',
      dirFlag: false, //目录的弹出层
      dirList: [], //目录列表
      CDName: '', //目录名称
      editDirId: '', //
      searchText: '',
      pageStart: 1,
      VideoList: [],
      count: 0,
      selDirId: '', //当前选择的目录id
      baseData: {}
    }
  },
  created () {
    // 接收兄弟组件传来的目录
    this.$bus.$on('senddir', dirlist => {
      this.dirList = dirlist
    })
    this.getCourse()
  },
  methods: {
    async saveAll () {
      // 获取富文本编辑器的数据
      this.baseData.Cdetails = this.$refs.wang.infoData
      var res = await _SaveAll(this.baseData)
      console.log(res)
      if (res.data.success) {
        this.$message.success('课程全部保存成功')
        // 跳转课程列表页
        this.$store.commit('setList', ['课程管理', '课程列表'])
        this.$router.push({ name: 'courselist' })
        this.$bus.$emit('sendmenu', '课程列表')
      }
    },
    // 给目录下添加视频接口
    async sureAddDirVid (Vid) {
      var res = await _addDirVideo({
        cid: this.$route.query._id,
        Vid: this.Vid,
        _id: this.selDirId
      })
      console.log(res)
    },
    async dirTableChange (currentRow) {
      // 选择当前行目录
      console.log(currentRow)
      this.selDirId = currentRow._id //存储当前行的_id
      // 切换目录获取目录下的视频
      var res = await _getDirVideo({
        CDid: this.$route.query._id,
        _id: this.selDirId
      })
      console.log(res)
    },
    async openVideo () {
      //打开添加视频弹出层  获取视频列表接口
      this.vFlag = true
      var res = await _getVideoList({
        searchText: this.searchText,
        pageStart: this.pageStart
      })
      console.log(res)
      this.VideoList = res.data.data.list
      this.count = res.data.data.count
    },
    toEdit (row) {
      //点击编辑
      this.CDName = row.CDName
      this.editDirId = row._id
      this.dirFlag = true
      this.dirTitle = '修改目录'
      this.dirBtn = '确认修改'
    },
    async delDir (_id) {
      //删除目录接口
      var res = await _delDir(_id, this.$route.query._id)
      console.log(res)
      this.$message.success('删除成功')
      this.getCourse()
    },
    async getCourse () {
      //从新获取课程信息和目录
      var res = await _getCourse(this.$route.query.ID)
      console.log(res)
      this.dirList = res.data.data.dirlist
      this.baseData = res.data.data.courselist
      // 设置目录数据的第一行默认高亮
      console.log(this.dirList[0])
      this.$refs.mydirTable.setCurrentRow(this.dirList[0])
    },
    Add () {
      this.dirFlag = true
    },
    async sureAdd () {
      if (this.editDirId) {
        var editRes = await _EditDir({
          CDid: this.$route.query.ID, //课程ID
          _id: this.$route.query._id, //课程的_ID
          CDName: this.CDName, //目录名称
          dirid: this.editDirId //当前编辑的目录id
        })
        console.log(editRes)
        this.dirList = editRes.data.data.list
      } else {
        //添加目录接口
        var res = await _addDir({
          CDid: this.$route.query.ID,
          _id: this.$route.query._id,
          CDName: this.CDName
        })
        console.log(res)
        if (res.data.data.success) {
          this.$message.success('添加目录成功')
        }
        this.dirList = res.data.data.list
      }
      this.$refs.mydirTable.setCurrentRow(this.dirList[0])
      this.CDName = ''
      this.dirFlag = false
      this.editDirId = ''
    }
  }
}
</script>
<style lang="less" scoped>
.con_wrap {
  width: 80%;
  margin: 20px;
  position: relative;
  .conCover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  .con_info {
    display: flex;
    justify-content: space-around;
    .con_left {
      width: 45%;

      margin-top: 10px;
      /deep/ .el-table__body tr.current-row > td.el-table__cell {
        background: salmon;
      }
    }
    .con_right {
      width: 45%;
      margin-top: 10px;
    }
  }
}
</style>
